Bemästra JavaScripts nullish coalescing-operator med kedjning: Effektiv tilldelning av standardvärden

JavaScripts nullish coalescing-operator (??) är ett kraftfullt verktyg för att tillhandahålla standardvärden på ett kortfattat och läsbart sätt. Denna guide går djupt in i operatörens nyanser, med särskilt fokus på kedjning och hur man använder den för effektiv tilldelning av standardvärden i olika scenarier. Vi kommer att utforska fördelarna, praktiska exempel och avancerade tekniker för att hjälpa dig att skriva renare och mer robust JavaScript-kod.

Förstå nullish coalescing-operatorn (??)

Nullish coalescing-operatorn (??) utvärderar ett värde och, om det värdet är `null` eller `undefined`, returnerar den ett standardvärde. Detta är ett mer specifikt och ofta föredraget alternativ till OR-operatorn (||), som utvärderas till `false` för en bredare uppsättning falska värden (t.ex. `0`, `''`, `false`).

Den grundläggande syntaxen är enkel:

            const result = value ?? defaultValue;
            

              
                Copy
              
            
          

Här är `value` uttrycket som ska utvärderas. Om `value` är `null` eller `undefined` returneras `defaultValue`; annars returneras `value` själv.

Varför använda ?? istället för ||?

Den främsta fördelen med `??` framför `||` ligger i dess precision. Överväg dessa exempel:

\n
• const count = 0; const result = count || 10; // resultatet blir 10 (eftersom 0 är falsy)
\n
• const count = 0; const result = count ?? 10; // resultatet blir 0 (eftersom 0 varken är null eller undefined)
\n

I det första fallet, med `||`, tilldelar vi felaktigt `10` till `result` även när `count` legitimt är `0`. Operatorn `??` förhindrar detta och ersätter endast om originalvärdet är `null` eller `undefined`.

Kedjning av nullish coalescing-operatorn

Kedjning av nullish coalescing-operatorn gör att du kan kontrollera flera värden sekventiellt och endast tillhandahålla ett standardvärde om alla föregående värden är `null` eller `undefined`. Detta är otroligt användbart för att komma åt kapslade egenskaper eller standardvärden inom komplexa datastrukturer.

Grundläggande kedjningsexempel

Föreställ dig att du har ett objekt som representerar en användares profil och att du vill visa deras föredragna språk. Språket kan vara inställt på några olika platser, med ett standardvärde om inget anges.

            const userProfile = {\n  preferences: {\n    language: null, // Eller undefined\n  },\n};\n\nconst preferredLanguage = userProfile.preferences.language ?? 'en';\nconsole.log(preferredLanguage); // Output: 'en'\n
            

              
                Copy
              
            
          

Låt oss nu lägga till kedjning för att kontrollera potentiellt saknade `preferences`:

            const userProfile = {}; // preferences kan saknas\n\nconst preferredLanguage = userProfile.preferences?.language ?? 'en'; // Använder optional chaining för säkerhet\nconsole.log(preferredLanguage); // Output: 'en'\n
            

              
                Copy
              
            
          

I detta förbättrade exempel, om `userProfile.preferences` är `undefined`, kommer koden elegant att gå över till standardvärdet 'en'. Operatorn `?.` (optional chaining operator) förhindrar fel vid åtkomst av egenskaper i potentiellt odefinierade objekt.

Avancerad kedjning för flera standardtilldelningar

Kedjning av `??` tillåter flera standardtilldelningar i ett enda uttryck. Utvärderingen fortsätter från vänster till höger, och det första icke-null/undefined-värdet som påträffas används.

            const settings = {\n  theme: null,\n  font: undefined,\n  size: 16,\n};\n\nconst theme = settings.theme ?? settings.defaultTheme ?? 'light'; // Kontrollerar settings.theme, sedan settings.defaultTheme, sedan standardvärdet 'light'\nconst font = settings.font ?? 'Arial'; // Om font är null eller undefined, standardvärde Arial\nconst fontSize = settings.fontSize ?? 12; // Om fontSize är undefined, är standardvärdet 12\n\nconsole.log(theme); // Output: 'light'\nconsole.log(font); // Output: 'Arial'\nconsole.log(fontSize); // Output: 12, eftersom settings.fontSize är undefined och inget standardvärde finns i settings\n
            

              
                Copy
              
            
          

I `theme`-exemplet, om `settings.theme` är null eller undefined, kontrollerar koden `settings.defaultTheme`. Om *detta* också är null eller undefined, används standardvärdet 'light'. Detta tillvägagångssätt förenklar avsevärt tilldelningen av standardvärden när olika nivåer av reservvärden behövs.

Åtkomst till kapslade egenskaper med kedjning

Nullish coalescing-operatorn briljerar när man arbetar med djupt kapslade objektstrukturer, där åtkomst till en egenskap kan leda till `undefined`-värden på olika nivåer.

            const user = {\n  details: {\n    address: {\n      city: null,\n    },\n  },\n};\n\nconst city = user.details?.address?.city ?? 'Unknown';\nconsole.log(city); // Output: 'Unknown'\n
            

              
                Copy
              
            
          

I detta exempel navigerar de valfria kedjeoperatorerna (`?.`) säkert genom de kapslade egenskaperna. Om antingen `user.details` eller `user.details.address` är `undefined`, eller om `user.details.address.city` är `null` eller `undefined`, kommer koden att tilldela 'Unknown' till `city`. Denna struktur hjälper till att undvika vanliga `TypeError`-undantag när man hanterar potentiellt ofullständig data.

Bästa praxis och överväganden

Läsbarhet och kodklarhet

Även om kedjning av nullish coalescing-operatorn avsevärt kan förbättra kodens korthet, är det viktigt att bibehålla läsbarheten. Alltför långa kedjor kan bli svåra att förstå. Tänk på följande punkter:

\n
• Håll kedjorna relativt korta. Om du har en kedja med fler än tre eller fyra `??`-operatorer, överväg att dela upp den i flera rader för bättre läsbarhet, eller till och med använda separata variabler.
\n
• Använd meningsfulla variabelnamn. Beskrivande variabelnamn gör det lättare att förstå logiken.
\n
• Lägg till kommentarer vid behov. Förklara syftet med komplexa kedjor.
\n

Operationsordning

Operatorn `??` har en relativt låg prioritet. Detta innebär att den utvärderas efter de flesta andra operatorer. Därför, när du kombinerar `??` med andra operatorer (t.ex. aritmetiska operatorer eller logiska operatorer), var medveten om operationsordningen. Använd parenteser för att explicit definiera utvärderingsordningen vid behov, särskilt för komplexa uttryck.

            const value = (a + b) ?? c; // Utvärderar a + b först, sedan används ??\n
            

              
                Copy
              
            
          

Jämförelse med OR-operatorn (||)

Som nämnts tidigare skiljer sig nullish coalescing-operatorn från den logiska OR-operatorn (||). Medan `||` utvärderas till `false` för många värden (inklusive `0`, `''`, `false`, `NaN`, `null` och `undefined`), utvärderas `??` till `false` *endast* för `null` och `undefined`. Välj den operator som bäst passar dina behov. Till exempel, när du säkerställer att ett värde inte är en tom sträng, och du är okej med 0 som ett giltigt värde, använd `??`.

När man bör undvika överanvändning

Även om nullish coalescing-operatorn är ett kraftfullt verktyg, överanvänd den inte. Överanvändning kan leda till mindre läsbar kod. Här är några scenarier där alternativa tillvägagångssätt kan vara bättre:

\n
• Enkla standardtilldelningar: För mycket enkla tilldelningar kan en enkel `if/else`-sats vara tydligare.
\n
• Komplexa logiska villkor: Om logiken bakom standardvärdestilldelningen är komplex, överväg att använda en `if/else`-sats eller en dedikerad funktion för att kapsla in logiken.
\n

Praktiska exempel och globala användningsfall

Låt oss granska några praktiska exempel, med tanke på en global publik och internationella sammanhang:

Exempel 1: Internationalisering (i18n) och lokalisering (l10n)

I internationaliserade applikationer kan hämtning av lokaliserad text innebära att man kontrollerar flera källor. Operatorn `??` förenklar denna process.

            // Förutsätter ett i18n-bibliotek och språkkonfiguration\nconst userLocale = getUserLocale(); // t.ex. 'fr-CA', 'en-US'\n\nconst localizedMessage = translations[userLocale]?.welcomeMessage ?? translations[userLocale.split('-')[0]]?.welcomeMessage ?? translations['en']?.welcomeMessage ?? 'Welcome';\n\nconsole.log(localizedMessage); // Visar välkomstmeddelandet med användarens föredragna språk, återgår till språkkod och sedan 'en'\n
            

              
                Copy
              
            
          

Denna kod försöker först hämta meddelandet baserat på användarens fullständiga språkinställning (`fr-CA`). Om det misslyckas (översättningen är inte tillgänglig), återgår den till språkkoden (`fr`), och om *det* också misslyckas, används standardvärdet 'en'.

Exempel 2: E-handels produktdata

Föreställ dig en e-handelsplattform med produktinformation hämtad från en databas. Produktbeskrivningar, prissättning och andra detaljer kan saknas beroende på region eller tillgänglighet.

            const product = fetchProductData(productId);\n\nconst productDescription = product.description ?? product.longDescription ?? 'Ingen beskrivning tillgänglig';\nconst productPrice = product.salePrice ?? product.regularPrice ?? 0; // Överväg att använda valutaformatering\n\nconsole.log(productDescription); // t.ex. 'Premium läderplånbok' eller 'Ingen beskrivning tillgänglig'\nconsole.log(productPrice); // t.ex. 75 eller 0\n
            

              
                Copy
              
            
          

Denna kod hanterar effektivt möjligheten att produktinformation saknas. Operatorn `??` tillhandahåller reservvärden när specifika produktattribut är otillgängliga.

Exempel 3: Användarprofilinställningar och behörigheter

I en webbapplikation kan användarprofilinställningar eller behörighetsnivåer lagras och nås på olika sätt, eventuellt via ett API. Operatorn `??` möjliggör enkel hantering av saknad eller ofullständig data.

            const userData = await fetchUserData(userId);\n\nconst userDisplayName = userData.profile?.displayName ?? userData.username ?? 'Gäst';\nconst userTheme = userData.preferences?.theme ?? 'default';\n\nconsole.log(userDisplayName); // 'JohnDoe' eller 'Gäst'\nconsole.log(userTheme); // 'dark' eller 'default'\n
            

              
                Copy
              
            
          

Här används användarens användarnamn som standard för visningsnamnet om ett visningsnamn inte tillhandahålls, och om inget av dem finns, använder koden "Gäst" som standard. Användartemat är också standard om det inte är närvarande.

Exempel 4: Bearbetning av formulärdata

När du hanterar formulärdata kan du få information från olika källor. Operatorn `??` kan användas för att tilldela standardvärden när ett specifikt formulärfält inte är ifyllt.

            const formData = { /* potentiellt saknad eller ofullständig data */ };\n\nconst userEmail = formData.email ?? ''; // Tom sträng om e-post inte angivits\nconst userCountry = formData.country ?? 'US'; // Standardvärde US\n\nconsole.log(userEmail); // user@example.com, eller ''\nconsole.log(userCountry); // US, eller annat standardvärde\n
            

              
                Copy
              
            
          

Detta förenklar validering och bearbetning av formulärdata genom att tillhandahålla förnuftiga standardvärden.

Avancerade tekniker och överväganden

Kombinera ?? med andra operatorer

Du kan kombinera `??` med andra operatorer, men kom ihåg att ta hänsyn till prioritet och använd parenteser för tydlighet. Till exempel kanske du vill validera resultatet av en egenskapåtkomst innan du tillhandahåller ett standardvärde:

            const age = (user.age >= 0 ? user.age : null) ?? 18; // Säkerställer att åldern inte är negativ, och standardvärdet är 18\n
            

              
                Copy
              
            
          

Anpassade standardvärdesfunktioner

För mer komplex logik för standardvärden kan du använda funktioner som standardvärden. Detta möjliggör dynamisk beräkning av standardvärdet baserat på andra variabler eller sammanhang.

            function getDefaultTheme(userRole) {\n  if (userRole === 'admin') {\n    return 'dark-admin';\n  } else {\n    return 'light';\n  }\n}\n\nconst userSettings = { /* ... */ };\nconst userTheme = userSettings.theme ?? getDefaultTheme(userSettings.role); // Standardtema beror på användarrollen\n
            

              
                Copy
              
            
          

Detta främjar renare kod genom att kapsla in logiken för standardvärdet.

Använda ?? med optional chaining (?.)

Optional chaining används ofta tillsammans med `??` för att säkert komma åt egenskaper hos potentiellt null eller undefined objekt. Detta undviker fel och gör koden mycket robustare:

            const profile = { /* ... */ };\nconst city = profile?.address?.city ?? 'Unknown'; // Säker åtkomst till kapslade egenskaper\n
            

              
                Copy
              
            
          

Om `profile` eller `profile.address` är undefined, returnerar uttrycket elegant 'Unknown' istället för att kasta ett fel.

Fördelar med att använda nullish coalescing-operator med kedjning

\n
• Förbättrad kodläsbarhet: Förenklar tilldelning av standardvärden, vilket gör koden lättare att förstå och underhålla.
\n
• Korthet: Minskar mängden kod som behövs för att hantera standardvärden.
\n
• Förebyggande av fel: Minskar risken för fel när man arbetar med potentiellt undefined- eller null-värden, särskilt i kombination med optional chaining.
\n
• Flexibilitet: Möjliggör enkel implementering av komplex logik för standardvärden genom kedjning.
\n
• Minskad boilerplate: Undviker behovet av långa `if/else`-satser i många fall.
\n

Slutsats

JavaScript nullish coalescing-operator (??) är ett värdefullt verktyg för modern JavaScript-utveckling, som erbjuder ett renare och mer kortfattat sätt att hantera standardvärden. Genom att bemästra kedjningstekniker och förstå bästa praxis kan du skriva mer robust, läsbar och underhållbar JavaScript-kod för applikationer över hela världen. Kom ihåg att överväga kontexten för din applikation och välj det tillvägagångssätt som bäst balanserar korthet och tydlighet.

Använd denna information för att förbättra dina JavaScript-utvecklingsfärdigheter och skriva renare, mer underhållbar kod för dina webbapplikationer. Öva, experimentera och var nyfiken! Lycka till med kodningen!